<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <base href="/">
    <title>Grid Shop</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="html/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CLato%7CKalam:300,400,700">
    <link rel="stylesheet" href="html/css/bootstrap.css">
    <link rel="stylesheet" href="html/css/fonts.css">
    <link rel="stylesheet" href="html/css/style.css">
    <style>.ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}</style>


    <style>
      /* 设置商品图片的固定大小 */
      .product-figure img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
      }

      /* 调整商品卡片布局 */
      .product {
        margin-bottom: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .product-body {
        flex: 1;
        padding: 15px;
      }

      /* 确保网格间距一致 */
      .mb-4 {
        margin-bottom: 1.5rem;
      }

      /* 添加分页样式 */
      .pagination-wrap {
        margin-top: 30px;
        text-align: center;
      }

      .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }

      .page-link {
        padding: 8px 16px;
        border: 1px solid #ddd;
        background-color: #fff;
        color: #333;
        cursor: pointer;
      }

      .page-link:hover {
        background-color: #f5f5f5;
      }

      #page-info {
        border: none;
        background: none;
      }
    </style>


  </head>
  <body>
    <div class="ie-panel"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="html/images/ie8-panel/warning_bar_0000_us.jpg" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
    <div class="preloader">
      <div class="preloader-body">
        <div class="cssload-bell">
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="page">
      <!-- Page Header-->
      <header class="section page-header page-header-corporate">
        <!-- RD Navbar-->
        <div class="rd-navbar-wrap">
          <nav class="rd-navbar rd-navbar-corporate" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-lg-stick-up-offset="154px" data-xl-stick-up-offset="182px" data-xxl-stick-up-offset="214px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div><a class="rd-navbar-basket rd-navbar-basket-mobile fl-bigmug-line-shopping202 rd-navbar-fixed-element-2" href="cart-page.html"><span>2</span></a>
            <div class="rd-navbar-aside-outer">
              <div class="rd-navbar-aside">
                <p>Opening hours: Monday - Friday: 08AM-06PM</p>
                <div>
                  <div class="group-xs group-middle">
                    <p class="rd-navbar-basket-text">Your Cart is Empty</p>
                    <!-- RD Navbar Basket-->
                    <div class="rd-navbar-basket-wrap">
                      <button class="rd-navbar-basket fl-bigmug-line-shopping202" data-rd-navbar-toggle=".cart-inline"><a class="rd-nav-link" href="shopping/cart">2</a>></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="rd-navbar-main-outer">
              <div class="rd-navbar-main">
                <div class="rd-navbar-main-element">
                  <!-- RD Navbar Panel-->
                  <div class="rd-navbar-panel">
                    <!-- RD Navbar Toggle-->
                    <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
                    <!-- RD Navbar Brand-->
                    <div class="rd-navbar-brand">
                      <!--Brand--><a class="brand" href="shopping/index"><img class="brand-logo-dark" src="html/images/logo-default-5-286x124.png" alt="" width="143" height="62"/><img class="brand-logo-light" src="html/images/logo-inverse-5-286x124.png" alt="" width="143" height="62"/></a>
                    </div>
                  </div>
                  <div class="rd-navbar-collapse">
                    <ul class="contacts-amber">
                      <li><a href="#">523 Sylvan Ave, 5th Floor<br/>Mountain View, CA 94041 USA</a></li>
                      <li><a href="tel:#">+1 (844) 123 456 78</a><br/><a href="mailto:#">info@demolink.org</a></li>
                    </ul>
                  </div>
                </div>
                <div class="rd-navbar-nav-wrap">
                  <ul class="rd-navbar-nav" style="justify-content: center; width: 100%;">
                    <li class="rd-nav-item"><a class="rd-nav-link" href="shopping/index">Home</a></li>
                    <li class="rd-nav-item active"><a class="rd-nav-link" href="shopping/shop">Shop</a></li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="shopping/login">LOGIN</a></li>
                  </ul>
                </div>
                <!--<div class="rd-navbar-nav-wrap">
                  <ul class="rd-navbar-nav">
                    <li class="rd-nav-item"><a class="rd-nav-link" href="shopping/index">Home</a>
                    </li>
                    <li class="rd-nav-item active"><a class="rd-nav-link" href="shopping/shop">Shop</a>
                    </li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="shopping/login">LOGIN</a>
                    </li>
                  </ul>
                </div>-->
              </div>
            </div>
          </nav>
        </div>
      </header>
      <section class="breadcrumbs-custom">
        <div class="parallax-container" data-parallax-img="html/images/bg-about.jpg">
          <div class="breadcrumbs-custom-body parallax-content context-dark">
            <div class="container">
              <h2 class="breadcrumbs-custom-title">Grid Shop</h2>
              <h5 class="breadcrumbs-custom-text">We are industry-leading organic farm delivering the best products <br class="d-none d-md-block">that boost your daily life energy and potential.</h5>
            </div>
          </div>
        </div>
        <div class="breadcrumbs-custom-footer">
          <div class="container">
            <ul class="breadcrumbs-custom-path">
              <li><a href="shopping/index">Home</a></li>
              <li><a href="shopping/shop">Shop</a></li>
              <li class="active">Grid Shop</li>
            </ul>
          </div>
        </div>
      </section>
      <!-- Section Shop-->
      <section class="section section-xxl bg-default text-md-left">
        <div class="container">
          <div class="row row-50">
            <div class="col-lg-4 col-xl-3">
              <div class="aside row row-30 row-md-50 justify-content-md-between">
                <div class="aside-item col-sm-6 col-md-5 col-lg-12">
                  <h6 class="aside-title">搜索商品</h6>
                  <form class="rd-search form-search" onsubmit="return false;">
                    <div class="form-wrap">
                      <input class="form-input" id="search-form" type="text" name="s" autocomplete="off">
                      <label class="form-label" for="search-form">输入商品名称...</label>
                      <button class="button-search fl-bigmug-line-search74" type="button" onclick="searchProducts()"></button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div class="col-lg-8 col-xl-9">
              <div class="row row-30 row-lg-50">
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Popular Product Area Start -->
      <div class="row row-30 row-lg-50">
        <div class="container">
          <div class="section-title"><h3>Popular Product</h3></div>
          <div class="row" id="popular-products">
            <!-- 商品数据将动态插入到这里 -->
          </div>
          <!-- 分页导航 -->
          <!-- 修改分页导航样式 -->
          <div class="pagination-wrap">
            <nav aria-label="Page navigation">
              <ul class="pagination">
                <li class="page-item page-item-control">
                  <button id="prev-page" class="page-link">上一页</button>
                </li>
                <li class="page-item">
                  <span id="page-info" class="page-link"></span>
                </li>
                <li class="page-item page-item-control">
                  <button id="next-page" class="page-link">下一页</button>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <!-- Popular Product Area End -->
      <!-- Page Footer-->
<!--      <footer class="section footer-corporate footer-corporate-2 context-dark">-->
<!--        <div class="footer-corporate-body section-lg">-->
<!--          <div class="container">-->
<!--            <div class="row row-40 row-md-50 justify-content-xl-between">-->
<!--              <div class="col-sm-6 col-lg-4 wow fadeInRight">-->
<!--                <h5 class="footer-corporate-title">Visit our farm</h5>-->
<!--                <div class="footer-corporate-decor"></div>-->
<!--                <ul class="footer-corporate-info">-->
<!--                  <li>-->
<!--                    <div class="unit flex-column flex-sm-row align-items-center">-->
<!--                      <div class="unit-left"><span class="icon mdi mdi-map-marker"></span></div>-->
<!--                      <div class="unit-body"><a href="#">523 Sylvan Ave, 5th Floor<br/>Mountain View, CA 94041 USA</a></div>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div class="unit flex-column flex-sm-row align-items-center">-->
<!--                      <div class="unit-left"><span class="icon mdi mdi-clock"></span></div>-->
<!--                      <div class="unit-body">-->
<!--                        <ul class="list-schedule">-->
<!--                          <li><span>Weekdays:</span><span>08:00am - 08:00pm</span></li>-->
<!--                          <li><span>Weekends:</span><span>10:00am - 06:00pm</span></li>-->
<!--                        </ul>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </div>-->
<!--              <div class="col-sm-6 col-lg-4 wow fadeInRight" data-wow-delay=".1s">-->
<!--                <h5 class="footer-corporate-title">Quick links</h5>-->
<!--                <div class="footer-corporate-decor"></div>-->
<!--                <ul class="footer-corporate-list d-sm-inline-block d-md-block">-->
<!--                  <li><a href="about-us.html">History</a></li>-->
<!--                  <li><a href="#">FAQ</a></li>-->
<!--                  <li><a href="our-team.html">Farmers</a></li>-->
<!--                  <li><a href="#">Events</a></li>-->
<!--                  <li><a href="blog.html">Blog</a></li>-->
<!--                  <li><a href="#">Organic Fruits</a></li>-->
<!--                  <li><a href="#">Our Smoothies</a></li>-->
<!--                  <li><a href="#">Fruit Boxes</a></li>-->
<!--                  <li><a href="#">Yoghurts</a></li>-->
<!--                </ul>-->
<!--              </div>-->
<!--              <div class="col-lg-4 wow fadeInRight" data-wow-delay=".2s">-->
<!--                <h5 class="footer-corporate-title">Get in touch</h5>-->
<!--                <div class="footer-corporate-decor"></div>-->
<!--                <p class="footer-corporate-text">We are always ready  to answer any questions you may have or help you select organic fruits.</p>-->
<!--                <div class="group-sm group-middle"><a class="button button-shadow-2 button-gray-14 button-zakaria" href="shopping/shop">Shop now</a><a class="button button-shadow-2 button-primary-2 button-zakaria" href="contact-us.html">Contact us</a></div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="footer-corporate-panel">-->
<!--          <div class="container">-->
<!--            <div class="row row-10 row-sm-30 align-items-center justify-content-sm-between">-->
<!--              <div class="col-sm-auto col-lg-4 text-lg-left">-->
<!--                <div class="group-xs group-middle"><img src="html/images/payment-1-45x15.png" alt="" width="45" height="15"/><img src="html/images/payment-2-46x28.png" alt="" width="46" height="28"/><img src="html/images/payment-3-62x17.png" alt="" width="62" height="17"/>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="col-sm-auto col-lg-4">-->
<!--                <ul class="list-inline list-social-4 list-inline-xs">-->
<!--                  <li><a class="icon mdi mdi-facebook icon-xxs" href="#"></a></li>-->
<!--                  <li><a class="icon mdi mdi-twitter icon-xxs" href="#"></a></li>-->
<!--                  <li><a class="icon mdi mdi-instagram icon-xxs" href="#"></a></li>-->
<!--                  <li><a class="icon mdi mdi-google-plus icon-xxs" href="#"></a></li>-->
<!--                  <li><a class="icon mdi mdi-skype icon-xxs" href="#"></a></li>-->
<!--                </ul>-->
<!--              </div>-->
<!--              <div class="col-lg-4 text-lg-right">-->
<!--                <p class="rights"><span>&copy;&nbsp; </span><span class="copyright-year"></span><span>&nbsp;</span><span>Orange</span><span>.&nbsp; All rights reserved.</span><span>&nbsp;</span><a href="privacy-policy.html">Privacy Policy</a><span>.</span> <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </footer>-->
    </div>
    <div class="snackbars" id="form-output-global"></div>
    <script src="html/js/core.min.js"></script>
    <script src="html/js/script.js"></script>

    <script src="layui/layui.all.js"></script>


    <script type="text/html" id="productitem">
      <div class="col-sm-6 col-md-4 col-lg-6 col-xl-4">
        <!-- Product-->
        <article class="product">
          <div class="product-body">
            <div class="product-figure"><img src="html/images/product-3-196x146.png" alt="" width="196" height="146"/>
            </div>
            <h5 class="product-title"><a href="single-product.html">Oranges</a></h5>
            <div class="product-price-wrap">
              <div class="product-price">$15.00</div>
            </div>
          </div>
          <div class="product-button-wrap">
            <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.html"></a></div>
            <div class="product-button"><a class="button button-primary button-zakaria fl-bigmug-line-shopping202" href="#"></a></div>
          </div>
        </article>
      </div>
    </script>

    <script>
      $(document).ready(function() {
        let currentPage = 1;
        const pageSize = 12; // 确保每页显示12个商品
        let searchKeyword = '';//搜索关键词
        let totalPages = 1;//总页数

        // 统一的加载商品函数
        function loadProducts(page) {
          // 显示加载中提示
          $('#popular-products').html('<div class="col-12 text-center"><p>加载中...</p></div>');

          // 确保传递正确的分页参数
          $.ajax({
            url: '/product/list',//后端接口
            method: 'GET',
            data: {
              page: page,         //当前页码
              pageSize: pageSize, // 明确指定每页的商品个数
              limit: pageSize,    // 后端框架使用的是limit
              text: searchKeyword //搜索关键词
            },
            success: function (response) {
              console.log('API响应:', response); // 调试用，查看返回数据

              // 计算总页数   =    商品总数/每页数量(向上取整)
              totalPages = Math.ceil(response.count / pageSize);
              //更新页码信息显示
              $('#page-info').text(`第 ${page} 页，共 ${totalPages} 页`);

              var productHtml = '';
              if (response.data && response.data.length > 0) {
                // 确保只显示pageSize个商品
                const productsToShow = response.data.slice(0, pageSize);

                //遍历商品数据, 生成HTML
                productsToShow.forEach(function (product) {
                  productHtml += `
                          <div class="col-md-4 mb-4">
                              <article class="product">
                                  <div class="product-body">
                                      <div class="product-figure">
                                          <img src="${product.imgurl}" alt="" width="196" height="146"/>
                                      </div>
                                      <h5 class="product-title">
                                          <a href="shopping/detail?productid=${product.productid}">${product.name}</a>
                                      </h5>
                                      <div class="product-price-wrap">
                                          <div class="product-price">${product.price}</div>
                                      </div>
                                  </div>
                                  <div class="product-button-wrap">
                                      <div class="product-button">
                                          <a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="shopping/detail?productid=${product.productid}"></a>
                                      </div>
                                      <div class="product-button">
                                          <a class="button button-primary button-zakaria fl-bigmug-line-shopping202" onclick="addToCart(${product.productid})" href="javascript:void(0);" data-product-id="${product.productid}"></a>
                                      </div>
                                  </div>
                              </article>
                          </div>
                      `;
                });
              } else {
                productHtml = '<div class="col-12 text-center"><p>没有找到商品</p></div>';
              }

              // 更新商品列表
              $('#popular-products').html(productHtml);

              // 更新分页按钮状态
              updatePaginationButtons();
            },
            error: function (error) {
              console.error('Error fetching product data:', error);
              layer.msg('加载商品失败，请稍后重试');
              $('#popular-products').html('<div class="col-12 text-center"><p>加载失败，请重试</p></div>');
            }
          });
        }


        // 更新分页按钮状态
        function updatePaginationButtons() {
          //如果是第一页, 禁用上一页按钮
          if (currentPage <= 1) {
            $('#prev-page').prop('disabled', true).css('opacity', '0.5');
          } else {
            $('#prev-page').prop('disabled', false).css('opacity', '1');
          }
          //如果是最后一页禁用下一页按钮
          if (currentPage >= totalPages) {
            $('#next-page').prop('disabled', true).css('opacity', '0.5');
          } else {
            $('#next-page').prop('disabled', false).css('opacity', '1');
          }
        }

        // 搜索函数
        window.searchProducts = function() {
          searchKeyword = $('#search-form').val().trim();
          currentPage = 1;  // 重置页码
          loadProducts(currentPage);
        }

        // 搜索框回车事件
        $('#search-form').keypress(function(e) {
          if(e.which == 13) { //13是回车键的键码
            searchProducts();
            return false;//阻止表单默认提交
          }
        });

        // 上一页按钮点击事件
        $('#prev-page').on('click', function() {
          if (currentPage > 1) {
            currentPage--;//页码减一
            loadProducts(currentPage);//加载新页面
         }
        });

        $('#next-page').on('click', function() {
          if (currentPage < totalPages) {
            currentPage++;
            loadProducts(currentPage);
          }
        });

        // 初始加载
        loadProducts(currentPage);
      });

      // 添加购物车功能
      function addToCart(productid) {
        $.ajax({
          url:"cart/add",
          data:{productid:productid,count:1},
          success:function(result){
            console.log(typeof result);
            if(result.code==401){
              layer.msg(result.msg,{icon:2});
              setTimeout(function(){
                location.href="shopping/login";
              },2000)
            }else{
              layer.msg("已成功加入购物车",{icon:1,time:1800});
            }
          },
          error:function(){

          }
        });
      }

      // 更新购物车数量
      /*function updateCartCount() {
        $.ajax({
          url: '/cart/update',
          method: 'GET',
          success: function(response) {
            $('.rd-navbar-basket').html(`<span>${response.data}</span>`);
          }
        });
      }*/
    </script>

  </body>

</html>